<template>
  <DetailBox :title="getRouteTitle()" :border="2" :isDetail="true" :detailTitle="'自定义'" @clickA="testClick">
    <template #center>
      <slot name="center">
        <div style="width:1200px;height: 400px;overflow: auto">
          <ContentBox :title="'第二部分'" :border="1" :width="602" :marginHeight="320">
            <template #center>
              <slot name="center">
                <div id="main" style="width: 100%;height:290px;"></div>
              </slot>
            </template>
          </ContentBox>

        </div>
      </slot>
    </template>
  </DetailBox>
</template>

<script setup lang="ts">
import {onMounted} from 'vue'
import HuiCharts from '@opentiny/huicharts';
import DetailBox from "@/views/components/DetailBox.vue";
import ContentBox from "@/views/components/ContentBox.vue";
import {getRouteTitle} from "@/utils";



onMounted(() => {
  let chartIns = new HuiCharts();

  let chartContainerDom = document.getElementById('main');
  chartIns.init(chartContainerDom);

// 填入图表配置项
  let chartOption = {
    theme: 'bpit-dark',
    padding: [30, 80, 50, 20],
    data: [
      { 'Month': '一月', 'Score': 400 },
      { 'Month': '二月', 'Score': 500, },
      { 'Month': '三月', 'Score': 900,},
      { 'Month': '四月', 'Score': 700 },
      { 'Month': '五月', 'Score': 800 },
      { 'Month': '六月', 'Score': 500 },
      { 'Month': '七月', 'Score': 900 },
      { 'Month': '八月', 'Score': 300 },
      { 'Month': '九月', 'Score': 500 },
      { 'Month': '十月', 'Score': 800 },
      { 'Month': '十一月', 'Score': 900 },
      { 'Month': '十二月', 'Score': 500 }
    ],
    xAxis: {
      data: 'Month',
    },
    yAxis: {
      name: '单位'
    },
    direction: 'horizontal',
    markLine: {
      data: 800,
      name: 'info',
      symbolSize: [2, 32],
    },
    background: [{
      name: 'error',
      data: 100,
    },{
      name: 'warning',
      data: 200,
    },{
      name: 'subwarning',
      data: 300,
    },{
      name: 'success',
      data: 400,
    }]
  };


// 指定使用图表类型：LineChart、AreaChart、BarChart、PieChart、GaugeChart、RadarChart、ProcessChart、BubbleChart等
// 图表类型的英文名称可以在文档左侧菜单栏看到
  let chartType = 'BulletChart';
  chartIns.setSimpleOption(chartType, chartOption);
//
// // 开始渲染
  chartIns.render();
})

const testClick = () => {
  console.log('您点击了测试自定义按钮')
}

// onBeforeUnmount(() => {
//   chartIns
// })

</script>


<style scoped lang="scss">
</style>
